<!-- 1.sku弹窗左边侧边栏文字调整，供应商改成(D),卖家改成(S)，平台改成(P),
2.快递信息(供应商)改成快递信息(平台)也就是“快递信息(P)”,上传参考图片(供应商)改成“上传参考图片中文版(D)”，上传参考图片(卖家)改成“上传参考图片中文版(S)”.
3.仓库采购单默认跳平台没错，但是供应商采购单sku弹窗应该默认跳-基本信息(D),
4.所有sku弹窗左边和右边侧边栏都要文字左对齐 -->
<template>
  <div v-if="PlusAddSku">
    <el-dialog class="fatherBox" :visible.sync="PlusAddSku" width="1400px" append-to-body :before-close="cancel">
      <div slot="title" class="header">
        <div class="headerLeft">详情/修改</div>
        <div class="headercenter">{{ skuInfo.skuNo }}</div>
      </div>
      <div class="curentMain">
        <div class="cunrentContentLeft">
          <ImgUploadManage
            permission="distribution:skuDistributor:updateSkuImgUrl"
            style="margin: 20px 20px 0 20px"
            type="7"
            :needSplit="false"
            :businessId="skuInfo.skuId"
            :fileList.sync="imgUrl"
            @select="setSkuImg"
          />
          <div class="checkOutList">
            <div
              :title="$t('基本信息')"
              v-hasPermi="['distribution:skuDistributor:getSkuDistributorDetails']"
              @click="checkNumber('basicInformation')"
              :class="activeNumber == 'basicInformation' ? 'cunrentPage' : ''"
            >
              <!-- 基本信息(供应商) -->
              {{ $t('基本信息') }}(D)
            </div>
            <div
              :title="$t('快递信息')"
              v-hasPermi="['distribution:skuDistributor:getSkuDistributorDeliverInfo']"
              @click="checkNumber('expressageInformation')"
              :class="activeNumber == 'expressageInformation' ? 'cunrentPage' : ''"
            >
              <!-- 快递信息(供应商) -->
              {{ $t('快递信息') }}(P)
            </div>
            <div
              :title="$t('清关信息')"
              v-hasPermi="['distribution:skuDistributor:getSkuDistributorCustomsClearanceInfo']"
              @click="checkNumber('customsInformation')"
              :class="activeNumber == 'customsInformation' ? 'cunrentPage' : ''"
            >
              <!-- 清关信息(平台) -->
              {{ $t('清关信息') }}(P)
            </div>

            <div
              :title="$t('云信息')"
              v-hasPermi="['distribution:skuDistributor:getCloudSkuDetails']"
              @click="checkNumber('cloudInfo')"
              :class="activeNumber == 'cloudInfo' ? 'cunrentPage' : ''"
            >
              {{ $t('云信息') }}
            </div>

            <div
              :title="$t('包材信息')"
              v-hasPermi="['distribution:skuDistributor:getSkuDistributorPackageMaterial']"
              @click="checkNumber('packingInformation')"
              :class="activeNumber == 'packingInformation' ? 'cunrentPage' : ''"
            >
              <!-- 包材信息(平台) -->
              {{ $t('包材信息') }}(P)
            </div>

            <div
              :title="$t('采购信息')"
              v-hasPermi="['distribution:skuDistributor:getSkuDistributorPurchaseInfo']"
              @click="checkNumber('purchaseInformation')"
              :class="activeNumber == 'purchaseInformation' ? 'cunrentPage' : ''"
            >
              <!-- 采购信息(供应商) -->
              {{ $t('采购信息') }}(D)
            </div>
            <div
              :title="$t('上传参考图片中文版')"
              v-hasPermi="['distribution:skuDistributor:uploadSkuBatchImages']"
              @click="checkNumber('referenceImage')"
              :class="activeNumber == 'referenceImage' ? 'cunrentPage' : ''"
            >
              {{ $t('上传参考图片中文版') }}
            </div>
            <div
              :title="$t('上传参考图片日文版')"
              v-hasPermi="['distribution:skuDistributor:uploadSkuBatchJPImages']"
              @click="checkNumber('ReferencePicture')"
              :class="activeNumber == 'ReferencePicture' ? 'cunrentPage' : ''"
            >
              {{ $t('上传参考图片日文版') }}
            </div>
            <!-- 卖家 -->
            <div
              :title="$t('基本信息')"
              v-hasPermi="['distribution:skuDistributor:getSkuSellerDetails']"
              @click="checkNumber('basicInformationSeller')"
              :class="activeNumber == 'basicInformationSeller' ? 'cunrentPage' : ''"
            >
              <!-- 基本信息(卖家) -->
              {{ $t('基本信息') }}(S)
            </div>
            <div
              :title="$t('快递信息')"
              v-hasPermi="['distribution:skuDistributor:getSkuDist11rDeliverInfo']"
              @click="checkNumber('expressageInformationSeller')"
              :class="activeNumber == 'expressageInformationSeller' ? 'cunrentPage' : ''"
            >
              <!-- 快递信息(卖家) -->
              {{ $t('快递信息') }}(S)
            </div>
            <div
              :title="$t('sku模版')"
              v-if="isShowAll == true"
              v-hasPermi="['distribution:skuDistributor:getSellerSkuTemplate']"
              @click="checkNumber('skuInformation')"
              :class="activeNumber == 'skuInformation' ? 'cunrentPage' : ''"
            >
              <!-- sku模版(卖家) -->
              {{ $t('sku模版') }}(S)
            </div>

            <div
              :title="$t('参考图片中文版')"
              @click="checkNumber('referenceImageop')"
              v-hasPermi="['distribution:skuDistributor:getSkuBatchImages']"
              :class="activeNumber == 'referenceImageop' ? 'cunrentPage' : ''"
            >
              {{ $t('参考图片中文版') }}
            </div>

            <!-- 参考图片查看按钮 -->
            <div
              :title="$t('参考图片日文版')"
              v-hasPermi="['distribution:skuDistributor:getSkuBatchJPImages']"
              @click="checkNumber('ReferencePictureop')"
              :class="activeNumber == 'ReferencePictureop' ? 'cunrentPage' : ''"
            >
              <!-- 参考图片日文版 -->
              {{ $t('参考图片日文版') }}
            </div>
          </div>
        </div>
        <div class="cunrentContent" style="padding-bottom: 70px">
          <!-- 基本信息 -->
          <basicInformation ref="basicInformation" v-if="activeNumber == 'basicInformation'" :skuId="skuInfo.skuId">
          </basicInformation>
          <!-- 快递信息 -->
          <expressageInformation
            ref="expressageInformation"
            v-else-if="activeNumber == 'expressageInformation'"
            :skuId="skuInfo.skuId"
          ></expressageInformation>
          <!-- 云信息 -->
          <CloudInfo :skuId="skuInfo.skuId" ref="cloudInfoRef" v-else-if="activeNumber == 'cloudInfo'"> </CloudInfo>
          <!-- 清关信息 -->
          <customsInformation ref="customsInformation" v-else-if="activeNumber == 'customsInformation'">
          </customsInformation>
          <!-- 包材信息 -->
          <packingInformation ref="packingInformation" v-else-if="activeNumber == 'packingInformation'">
          </packingInformation>
          <!-- 采购信息 -->
          <purchaseInformation ref="purchaseInformation" v-else-if="activeNumber == 'purchaseInformation'">
          </purchaseInformation>
          <!-- 上传参考图片中文版 -->
          <referenceImage
            key="referenceImage"
            ref="referenceImage"
            :skuId="skuInfo.skuId"
            v-else-if="activeNumber == 'referenceImage'"
          >
          </referenceImage>

          <!-- 上传参考图片日文版 -->
          <ReferencePicture
            key="ReferencePicture"
            ref="ReferencePicture"
            :skuId="skuInfo.skuId"
            v-else-if="activeNumber == 'ReferencePicture'"
          >
          </ReferencePicture>

          <!-- 查看参考图片日文版 -->
          <ReferencePicture
            key="ReferencePictureop"
            ref="ReferencePictureop"
            disabled
            :skuId="skuInfo.skuId"
            v-else-if="activeNumber == 'ReferencePictureop'"
          >
          </ReferencePicture>

          <!-- 参考图片中文版 -->
          <referenceImage
            key="referenceImageop"
            ref="referenceImageop"
            disabled
            :skuId="skuInfo.skuId"
            v-else-if="activeNumber == 'referenceImageop'"
          >
          </referenceImage>
          <!--------------------------------------------------------------------->
          <!-- 基本信息(卖家) -->
          <basicInformationSeller
            ref="basicInformationSeller"
            v-else-if="activeNumber == 'basicInformationSeller'"
            :skuId="skuInfo.skuId"
          ></basicInformationSeller>
          <!-- 快递信息(卖家) -->
          <expressageInformationSeller
            ref="expressageInformationSeller"
            v-else-if="activeNumber == 'expressageInformationSeller'"
            :skuId="skuInfo.skuId"
          >
          </expressageInformationSeller>
          <!-- sku模版(卖家) -->
          <skuInformation
            :skuId="skuInfo.skuId"
            @cancel="cancel"
            ref="skuInformation"
            v-else-if="activeNumber == 'skuInformation'"
          ></skuInformation>
        </div>
        <div class="cunrentContentRight">
          <div class="checkOutListRight">
            <div
              :title="$t('创建采购单')"
              @click="createPurchaseOrder"
              v-hasPermi="['distribution:purchase:createPurchaseOrder']"
            >
              {{ $t('创建采购单') }}
            </div>
            <div
              :title="$t('采购记录')"
              v-hasPermi="['distribution:purchase:listDistributor']"
              @click="showPurchaseRecord"
            >
              {{ $t('采购记录') }}
            </div>
            <div
              :title="$t('出入库记录')"
              @click="showOutInStore"
              v-hasPermi="['distribution:stockPositionRecords:dis']"
            >
              {{ $t('出入库记录') }}
            </div>
            <div
              :title="$t('出库记录')"
              @click="showOutStore"
              v-hasPermi="['distribution:stockPositionRecords:seller']"
            >
              {{ $t('出库记录') }}
            </div>
            <div
              :title="$t('盘点记录')"
              v-hasPermi="['distribution:stockCheckPosition:skuCheckRecordList']"
              @click="showSkuCheckRecordList"
            >
              {{ $t('盘点记录') }}
            </div>
            <div
              :title="$t('云申请记录')"
              @click="showCloudApplyRecord"
              v-hasPermi="['distribution:skuDistributor:sellerUrl']"
            >
              {{ $t('云申请记录') }}
            </div>
            <div
              :title="$t('卖家参考链接')"
              v-hasPermi="['distribution:skuSellerUrl:list']"
              v-if="isShowAll == true"
              @click="showReferenceLinkSeller"
            >
              {{ $t('卖家参考链接') }}
            </div>
            <div :title="$t('供应商参考链接')" v-hasPermi="['distribution:skuUrl:list']" @click="showReferenceLink">
              {{ $t('供应商参考链接') }}
            </div>
            <div
              :title="$t('查询序列号')"
              v-hasPermi="['distribution:purchaseSkuSerializable:getPurchaseSkuSerializableListBySkuDetails']"
              @click="showSerialNumber"
            >
              {{ $t('查询序列号') }}
            </div>
            <!-- <div v-hasPermi="['distribution:skuDistributor:setPriceMode']">
              设置价格模式
            </div>
            <div v-hasPermi="['distribution:skuDistributor:setRule']">
              设置预留规则
            </div> -->
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 创建采购单 -->
    <CreatePurchase ref="createPurchaseRef" />
    <!-- 采购记录 -->
    <PurchaseRecord ref="purchaseRecordRef" />
    <!-- 出入库记录 -->
    <OutInStore ref="outInStoreRef" />
    <!-- 出库记录 -->
    <OutStore ref="outStoreRef" />
    <!-- 云申请记录 -->
    <CloudApplyRecord ref="cloudApplyRecordRef" />
    <!-- 供应商参考链接 -->
    <ReferenceLink ref="referenceLinkRef" />
    <!-- 所有序列号 -->
    <AllSerial ref="allSerialRef" />
    <!--  卖家参考链接 -->
    <ReferenceLinkSeller ref="referenceLinkSellerRef" />
    <!-- 盘点记录 -->
    <SkuCheckRecordList ref="skuCheckRecordListRef" />
  </div>
</template>

<script>
import basicInformation from './conponents/basicInformation'
import expressageInformation from './conponents/expressageInformation'
import customsInformation from './conponents/customsInformation'
import CloudInfo from './conponents/cloudInfo'
import packingInformation from './conponents/packingInformation'
import purchaseInformation from './conponents/purchaseInformation'
import skuInformation from './conponents/skuInformation'
import basicInformationSeller from './conponents/basicInformationSeller'
import expressageInformationSeller from './conponents/expressageInformationSeller'
import referenceImage from './conponents/referenceImage'
import ReferencePicture from './conponents/ReferencePicture'

import ImageUpload from '@/components/ImageUpload'
import CreatePurchase from './conponents/createPurchase'
import PurchaseRecord from './conponents/purchaseRecord'
import CloudApplyRecord from './conponents/cloudApplyRecord'
import OutInStore from './conponents/outInStore'
import OutStore from './conponents/outStore'
import ReferenceLink from './conponents/referenceLink'
import ReferenceLinkSeller from './conponents/referenceLinkSeller'
import SkuCheckRecordList from './conponents/skuCheckRecordList'
import AllSerial from './conponents/allSerial'

import { updateSkuImgUrl, getSkuDetails } from '@/api/distribution/sku/Skucontmoduler'
export default {
  name: 'PlusAddSku',
  components: {
    basicInformation,
    CloudInfo,
    expressageInformation,
    customsInformation,
    packingInformation,
    purchaseInformation,
    skuInformation,
    basicInformationSeller,
    expressageInformationSeller,
    CreatePurchase,
    PurchaseRecord,
    CloudApplyRecord,
    OutInStore,
    OutStore,
    referenceImage,
    ReferenceLink,
    ReferenceLinkSeller,
    ReferencePicture,
    SkuCheckRecordList,
    AllSerial,
  },
  props: {
    isShowAll: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      imgUrl: '',
      PlusAddSku: false,
      curentData: {},
      curentDataRuler: {},
      activeNumber: '',
      skuInfo: {},
      isUplaodImage: true,
    }
  },

  watch: {
    PlusAddSku: function (newV) {
      if (newV === true) {
        // this.getSkuImg()
      }
    },
  },
  methods: {
    /**盘点记录 */
    showSkuCheckRecordList() {
      const data = {
        title: '盘点记录',
        skuId: this.skuInfo.skuId,
      }
      this.$refs['skuCheckRecordListRef'].handleOpen(data)
    },
    /**创建采购单 */
    createPurchaseOrder() {
      const data = {
        title: '创建采购单',
        skuNo: this.skuInfo.skuNo,
        skuId: this.skuInfo.skuId,
      }
      this.$refs['createPurchaseRef'].handleAdd(data)
    },
    /**采购记录 */
    showPurchaseRecord() {
      const data = {
        title: '采购记录',
        skuId: this.skuInfo.skuId,
      }
      this.$refs['purchaseRecordRef'].handleOpen(data)
    },

    /**出入库记录 */
    showOutInStore() {
      const data = {
        title: '出入库记录',
        skuId: this.skuInfo.skuId,
      }
      this.$refs['outInStoreRef'].handleOpen(data)
    },
    /**出库记录 */
    showOutStore() {
      const data = {
        title: '出库记录',
        skuId: this.skuInfo.skuId,
      }
      this.$refs['outStoreRef'].handleOpen(data)
    },
    /**云申请记录 */
    showCloudApplyRecord() {
      const data = {
        title: '云申请记录',
        skuId: this.skuInfo.skuId,
      }
      this.$refs['cloudApplyRecordRef'].handleOpen(data)
    },
    /**查询序列号 */
    showSerialNumber() {
      const data = {
        title: '所有序列号',
        skuInfo: this.skuInfo,
      }
      this.$refs['allSerialRef'].handleOpen(data)
    },
    /**参考链接 */
    showReferenceLink() {
      const data = {
        title: '供应商参考链接',
        skuInfo: this.skuInfo,
      }
      this.$refs['referenceLinkRef'].handleOpen(data)
    },
    /**参考链接 */
    showReferenceLinkSeller() {
      const data = {
        title: '卖家参考链接',
        skuInfo: this.skuInfo,
      }
      this.$refs['referenceLinkSellerRef'].handleOpen(data)
    },
    // getSkuImg() {
    //   getSkuDetails(this.skuInfo.skuId).then((res) => {
    //     if (res.data.imgUrl) {
    //       this.$refs.ImageUploadRef.setFileList([{ url: res.data.imgUrl }])
    //     }
    //   })
    // },
    /**更新sku图片 */
    updateSkuImg(url) {
      // this.$refs.ImageUploadRef.setFileList([{ url }])
      if (url) this.imgUrl = url
    },
    setSkuImg() {
      this.$nextTick(() => {
        const data = {
          skuId: this.skuInfo.skuId,
          imgUrl: this.imgUrl,
        }
        updateSkuImgUrl(data).then((res) => {
          if (res.code == 200) {
            this.$message({ type: 'success', message: res.msg })
          }
        })
      })
    },
    setSkuInfo(info) {
      // console.log(window.getSelection(), "window.getSelection");
      let { type } = window.getSelection()
      // console.log(` ==>`, JSON.parse(JSON.stringify(info)));
      if (type && type == 'Range') {
        return
      }
      this.skuInfo = info
      this.PlusAddSku = true
    },
    // 选择tab切换中建类容
    checkNumber(value) {
      // console.log(value, "sss");
      this.$nextTick(function () {
        // console.log(this.$refs[this.activeNumber], this.activeNumber);

        if (this.$refs[this.activeNumber] && this.$refs[this.activeNumber].validFormData()) {
          this.$confirm('当前页面数据修改未保存, 是否离开?', '提示', {
            confirmButtonText: '离开',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.activeNumber = value
          })
        } else {
          // if ("sellerReferenceImage" == value) {
          //   this.isUplaodImage = false;
          // } else if ("referenceImageop" == value) {
          //   this.isUplaodImage = true;
          // }
          this.activeNumber = value
        }
      })
    },
    submitForm() {},
    cancel() {
      this.$nextTick(function () {
        if (this.$refs[this.activeNumber] && this.$refs[this.activeNumber].validFormData()) {
          this.$confirm('当前页面数据修改未保存, 是否离开?', '提示', {
            confirmButtonText: '离开',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.$emit('relaod')
              this.PlusAddSku = !this.PlusAddSku
              this.skuInfo = {}
              this.activeNumber = ''
            })
            .catch(() => {})
        } else {
          this.$emit('relaod')
          this.PlusAddSku = !this.PlusAddSku
          this.skuInfo = {}
          this.activeNumber = ''
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.cunrentPage {
  color: black;
  font-weight: 600;
}

.fatherBox {
  ::v-deep .el-dialog {
    margin-top: 2vh !important;
  }

  ::v-deep .el-dialog__body {
    padding: 0px 20px 10px 20px !important;
  }

  ::v-deep .el-dialog__header {
    padding-top: 10px;
    padding-bottom: 0px;

    .header {
      display: flex;
      justify-content: center;
      line-height: 40px;
      width: 100%;
      height: 40px;

      .headerLeft {
        position: absolute;
        left: 20px;
        float: left !important;
      }
    }

    .el-dialog__headerbtn {
      top: 12px;
    }
  }
}

.curentMain {
  display: flex;
  height: 840px;

  .cunrentContentLeft {
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    border: solid 1px rgba(0, 0, 0, 0.1);

    .lookAll {
      text-align: center;
      width: 100%;
      margin-top: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .checkOutList {
      width: 100%;

      // &>div:hover {
      //   background-color: rgb(224, 244, 253);
      // }

      & > div {
        text-align: left;
        width: 100%;
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .cunrentContent {
    padding: 20px;
    // padding-bottom: 40px!important;
    margin: 0 20px;
    flex: 1;
    height: 100%;
    border: solid 1px rgba(0, 0, 0, 0.1);
    overflow: auto;
  }

  .cunrentContentRight {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 2px;

    .checkOutListRight {
      width: 100%;

      & > div:hover {
        background-color: rgb(224, 244, 253);
      }

      & > div {
        cursor: pointer;
        text-align: left;
        padding: 10px 0;
        padding-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
